<!--
	地震烈度图
	Created by Penglei on 2023/08/08
-->
<template>
  <!-- <el-carousel ref="carouselRef" :class="{ active: isClick }" direction="horizontal" indicator-position="outside"
        arrow="always" :autoplay="autoplay" :interval="5000" height="340px">
        <el-button class="btn-close" size="large" circle @click="onClose"><el-icon>
                <CircleClose />
            </el-icon></el-button>
        <el-carousel-item v-for="item in 4" :key="item" @click="onClick" :style="{ height: imgHeight, width: imgWidth }">
            <img class="banner-img" src="../images/banner.png" :alt="item">
        </el-carousel-item>
    </el-carousel> -->
  <div class="bigBox">
    <el-button v-show="isShow" class="btn-closes" size="large" circle @click="onClose"
      ><el-icon> <CircleClose /> </el-icon
    ></el-button>
    <div class="divBox" @click="onClick" :style="{ height: imgHeight, width: imgWidth }">
<!--      <img class="banner-img" src="../images/banner.png" />-->
      <img class="banner-img" src="../images/banner2.jpg" />
    </div>
  </div>
</template>

<script setup name="SeismicIntensity">
// 自动播放
let autoplay = ref(true);
// 是否已点击
let isClick = ref(false);
// 关闭按钮是否显示
let isShow = ref(false);
// 图片宽高
let imgWidth = ref('450px');
let imgHeight = ref('340px');
// 轮播图点击事件
const onClick = (e) => {
  if (!isClick.value) {
    // autoplay.value = false;
    isShow.value = true;
    isClick.value = true;
    imgWidth.value = '1157px';
    imgHeight.value = '866px';
  }
};
// 关闭按钮点击事件
const onClose = (e) => {
  // autoplay.value = true;
  imgWidth.value = '450px';
  imgHeight.value = '340px';
  isShow.value = false;
  isClick.value = false;
};

// 初始化加载
const init = () => {};
</script>

<style lang="scss" scoped>
.el-carousel {
  overflow: hidden;

  :deep(.el-carousel__item) {
    background: linear-gradient(#1d388f 100%, #0b1864 65%, #1d388f 100%);
    border: 1px solid #599dff;
    padding: 10px;

    .banner-img {
      height: 100%;
      width: 100%;
    }
  }

  // 指示器
  :deep(.el-carousel__indicators) {
    padding: 0;
    display: flex;
    justify-content: center;

    .el-carousel__indicator {
      margin: 0 5px;

      .el-carousel__button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #418dfd;
        cursor: pointer;
      }

      &.is-active {
        .el-carousel__button {
          background: #46ffff;
          box-shadow: 0px 0px 6px 1px #46ffff;
        }
      }
    }
  }

  // 关闭按钮
  .btn-close {
    position: absolute;
    top: 20px;
    right: -685px;
    cursor: pointer;
    z-index: 1001;
    font-size: 35px;
    color: #475adb;
    border: none;
  }

  // 展开效果
  &.active {
    overflow: visible;
    position: relative;
    z-index: 1000;

    .el-carousel__item {
      display: none;
    }

    .is-active {
      display: block;
      overflow: visible;
      z-index: 1000;
    }
  }
}
.bigBox {
  margin: 10px 0 -20px 0;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .btn-closes {
    position: absolute;
    top: 12px;
    right: -695px;
    cursor: pointer;
    z-index: 1001;
    font-size: 35px;
    color: #475adb;
    border: none;
  }
}
</style>
